<template>
	<view>
		<!-- 状态栏高度 设置背景色 占位状态栏-->
		<view class="ztl" :style="{'height':statusBarHeight}"></view>
		<!-- 占位盒子 -->
		<view class="" :style="{'height': height}"></view>
		<!-- 导航栏 -->
		<navBar bgColor="#FFF">
			<image :slot="'left'" @click="navToBack" :src="xcxImgUrl && xcxImgUrl+'fanhui.svg'" style="width: 36rpx;height: 36rpx;">
			</image>
			<text :slot="'content'">新增/修改职员</text>
		</navBar>

		<view class="mian_addAccount pd10">
			<view>
				<!-- 注意，如果需要兼容微信小程序，最好通过setRules方法设置rules规则 -->
				<u--form labelPosition="left" :model="userInfo" :rules="rules" labelWidth='160' ref="uForm">
					<u-form-item label="职员姓名" required prop="name" borderBottom ref="item1">
						<u--input v-model="userInfo.name" border="none" placeholder="请输入职员姓名"></u--input>
					</u-form-item>
					<u-form-item label="手机号码" prop="phone" required borderBottom ref="item1">
						<u--input maxlength="11" v-model="userInfo.phone" border="none" type='number' placeholder="请输入手机号码"></u--input>
					</u-form-item>
					<u-form-item label="验证码" borderBottom required ref="item1">
						<!-- #ifndef APP-NVUE -->
						<u-input border="none" v-model="userInfo.authCode" placeholder="请填写验证码">
							<!-- #endif -->
							<!-- #ifdef APP-NVUE -->
							<u--input border="none" v-model="userInfo.authCode" type='number' placeholder="请填写验证码">
								<!-- #endif -->
								<template slot="suffix">
									<u-code ref="uCode" @change="codeChange" seconds="20" changeText="X秒重新获取"></u-code>
									<view class="tips">
										<view class="line"></view>
										<u-button @tap="getCode" :text="tips" size="mini"></u-button>
									</view>
								</template>
								<!-- #ifndef APP-NVUE -->
						</u-input>
						<!-- #endif -->
						<!-- #ifdef APP-NVUE -->
						</u--input>
						<!-- #endif -->
					</u-form-item>
					<u-form-item label="登录密码" borderBottom ref="item1">
						<u--input v-model="userInfo.password" border="none" placeholder="默认手机号后六位"></u--input>
					</u-form-item>
					<!-- <u-form-item label="职员性别"
						borderBottom
						class="sex"
						ref="item1">
						<view class="sex_item">
							<view 
							@click="selectSex(1)"
							:class="sexIndex == 1 ? 'sex_item_active' : ''">
								未知
							</view>
							<view 
							@click="selectSex(2)"
							:class="sexIndex == 2 ? 'sex_item_active' : ''">
								男
							</view>
							<view 
							@click="selectSex(3)"
							:class="sexIndex == 3 ? 'sex_item_active' : ''">
								女
							</view>
						</view>
					</u-form-item>
					<u-form-item label="职员职务"
						borderBottom
						ref="item1">
						<u--input v-model="userInfo.duty"
							border="none"
							placeholder="请输入职员职务"></u--input>
					</u-form-item> -->
				</u--form>

				<view @click="save" style="margin-top: 40rpx;width: 100%;">
					<newBtn name="保存" color="#FFF" bgColor="#ec4141"></newBtn>
				</view>
			</view>
		</view>
	</view>
</template>

<script>
	import newBtn from '@/components/newBtn/newBtn.vue'
	import {
		addSubMallMemberInfo,
		sendVerificationCode
	} from '@/api/global.js'
	import {
		parse
	} from 'qs';
	export default {
		components: {
			newBtn
		},
		data() {
			return {
				statusBarHeight: '',
				height: '',
				userInfo: {
					memberId: '',
					name: '',
					phone: '',
					authCode: '',
					password: '',
					duty: '', //职员职务
					sex: ''
				},
				rules: {
					'name': [{
						required: true,
						message: '请输入用户名',
						trigger: ['blur', 'change']
					}, {
						validator: (rule, value, callback) => {
							const pattern = /^[\u4e00-\u9fa5a-zA-Z]+$/;
							const isValid = pattern.test(value);
							if (isValid) {
								callback()
							}
							callback(new Error('请输入正确的用户名'))
						},
						trigger: ['change', 'blur'],

					}],
					'phone': [{
							type: 'string',
							required: true,
							message: '请输入手机号码',
							trigger: ['blur', 'change']
						}, {
							len: 11,
							message: '手机号码长度为11位',
							trigger: ['blur', 'change']
						},
						{
							// 自定义验证函数，见上说明
							validator: (rule, value, callback) => {
								// 上面有说，返回true表示校验通过，返回false表示不通过
								// uni.$u.test.mobile()就是返回true或者false的
								return uni.$u.test.mobile(value);
							},
							message: '手机号码不正确',
							// 触发器可以同时用blur和change
							trigger: ['change', 'blur'],
						}
					],
					'authCode': [{
						type: 'string',
						required: true,
						message: '请填写验证码',
						trigger: ['blur', 'change']
					}]
				},
				tips: '', //验证码提示
				sexIndex: 1, //选择性便秘下标
				obj: {}, //编辑子账号信息
			};
		},
		onReady(){
			this.$refs.uForm.setRules(this.rules);
		},
		onLoad(options) {
			//编辑子账号 回填信息
			this.obj = options?.obj ? JSON.parse(options?.obj) : {},
				this.userInfo = {
					name: this.obj?.name || '',
					phone: this.obj?.phone || '',
					memberId: this.obj?.memberId || ''
				}
		},
		onShow() {
			this.$nextTick(() => {
				// 获取状态栏的高度
				this.statusBarHeight = this.$store.state.statusBarHeight * 2 + 'rpx'
				// 计算站位的高度
				this.height = (this.$store.state.navBarHeight) * 2 + 'rpx'
				//获取高度
				// this.Utils.getDemoTopHeight('main_sendAccountNumber')
			})
		},
		methods: {
			//完成
			async save() {
				//校验必填
				let config = await this.$refs.uForm.validate()
				if (config) {
					let resr = await addSubMallMemberInfo({
						memberId: this.userInfo.memberId, //会员id
						name: this.userInfo.name,
						phone: this.userInfo.phone,
						verificationCode: this.userInfo.authCode,
						password: this.userInfo.password ? this.$md5(this.userInfo.password).toUpperCase() :
							'',
					})
					console.log(resr);
					if (resr.code == 2000) {
						this.Utils.toast(`保存成功`);
						uni.navigateBack();
					} else {
						this.Utils.toast(`${resr.msg}`)
					}
				}
			},
			codeChange(text) {
				this.tips = text;
			},
			getCode() {
				this.$refs.uForm.validateField('phone', (res) => {
					if (res.length == 0) {
						if (this.$refs.uCode.canGetCode) {
							// 模拟向后端请求验证码
							uni.showLoading({
								title: '正在获取验证码'
							})
							sendVerificationCode({
								phone: this.userInfo.phone,
								tag: 1
							}).then(resr => {
								if (resr.code == 2000) {
									uni.hideLoading();
									// 这里此提示会被this.start()方法中的提示覆盖
									uni.$u.toast('验证码已发送');
									// 通知验证码组件内部开始倒计时
									this.$refs.uCode.start();
								} else {
									uni.hideLoading();
									this.Utils.toast(`${resr.msg}`)
								}

							})

						} else {
							uni.$u.toast('倒计时结束后再发送');
						}
					}
				})
			},
			change(e) {
				console.log('change', e);
			},
			//选择性别
			selectSex(index) {
				this.sexIndex = index
			},
			//返回上一级
			navToBack() {
				uni.navigateTo({
					url: '/page_public/sendAccountNumber'
				})
			}
		}
	}
</script>

<style lang="scss" scoped>
	.mian_addAccount /deep/.u-form-item {
		padding-left: 20rpx !important;
	}

	.tips {
		position: relative;

		.line {
			position: absolute;
			left: 0;
			top: 12rpx;
			width: 2rpx;
			height: 20rpx;
			background-color: #ccc;
		}

		/deep/.u-button {
			color: #EC4141 !important;
			border: none !important;
			background-color: transparent !important;

			text {
				font-size: 24rpx !important;
			}
		}
	}

	/deep/.sex .u-form-item__body {
		flex-direction: column !important;
	}

	.sex_item {
		display: flex;

		view {
			width: 110rpx;
			height: 46rpx;
			border-radius: 60rpx;
			background-color: #f2f2f2;
			color: $text_color_333;
			font-size: $font_size_12;
			text-align: center;
			line-height: 46rpx;
			margin-right: 20rpx;
			margin-top: 20rpx;
		}

		.sex_item_active {
			background-color: $text_color_ec4141;
			color: #FFF;
		}
	}

	.mian_addAccount {
		width: 100%;
		height: 500px;
		box-sizing: border-box;

	}
</style>